<script setup>
import {ref, watch} from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {
        total: 0,
        pageNum: 1,
        pageSize: 5,
        pages: 0
      }
    }
  }
});
const emits = defineEmits(['query', 'update:modelValue']);
const doQuery = () => {
  emits('update:modelValue', page.value);
  emits('query', page.value);
};

const page = ref(props.modelValue);

watch(() => props.modelValue, (newVal, oldVal) => {
  page.value = newVal;
}, {deep: true, immediate: true});

const handleCurrentChange = (val) => {
  page.value.pageNum = val;
  doQuery();
};
const handleSizeChange = (val) => {
  page.value.pageSize = val;
  doQuery();
};
</script>

<template>
  <el-pagination v-if="page.total > 0 && page.pages > 0" size="small" background
                 layout="prev, pager, next, sizes"
                 :total="page.total"
                 :page-sizes="[5, 10, 20, 50, 100]"
                 v-model:current-page="page.pageNum"
                 v-model:page-size="page.pageSize"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 class="v-page"/>
</template>

<style scoped>
.v-page {
  text-align: center;
}
</style>